<template>
  <div class="app-container">
    <el-button type="primary" @click="queryPatient" >会员查询</el-button>
    <br>
    <br>


    <el-tabs v-if="editableTabs && editableTabs.length != 0" v-model="editableTabsValue" type="border-card" closable @tab-remove="removeTab">
      
      <el-tab-pane
        v-for="item in editableTabs"
        :key="item.name"
        :label="item.title"
        :name="item.name"
      >
        <!-- get patient list -->
        <div v-if="editableTabsValue == '会员查询'">
          <div class="header">
            <div style="display: flex;flex-direction: column;justify-content: end;width: 60%;">
              <el-form :model="query" ref="query" label-width="80px">
                <el-row :gutter=10>
                  <el-col :span=16>
                    <el-form-item label-width="250px" label="姓名/编号/电话(后四位)/身份证号" prop="name" >
                        <el-input v-model="query.name" placeholder="请输入姓名/编号/电话(后四位)/身份证号"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span=8>
                    <el-form-item>
                      <el-button type="primary" icon="el-icon-search" @click="search" >搜索</el-button>
                      <el-button @click="resetForm('query')">重置</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>

            <!-- <el-card class="box-card" v-for="report in reports" :key="report.jobOfficeId"  >
              <div slot="header" class="clearfix">
                <span>{{ report.jobOfficeName }}</span>
              </div>
              <div class="text item">
                {{'候诊人数: ' + report.waitingCount }}
              </div>
              <div class="text item">
                {{'就诊人数: ' + report.doingCount }}
              </div>
            </el-card> -->
          </div>
          <el-table
            v-loading="patientListLoading"
            :data="patientList"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
          > 
            <el-table-column align="center" label="序号" width="50">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="编号" width="120" align="center">
              <template slot-scope="scope">
                {{ scope.row.code }}
              </template>
            </el-table-column>
            <el-table-column label="姓名" width="100" align="center">
              <template slot-scope="scope">
                {{ scope.row.name }}
              </template>
            </el-table-column>
            <el-table-column label="手机号" width="80" align="center">
              <template slot-scope="scope">
                {{ scope.row.phone }}
              </template>
            </el-table-column>
            <el-table-column label="身份证号" width="170" align="center">
              <template slot-scope="scope">
                {{ scope.row.idCard }}
              </template>
            </el-table-column>
            <el-table-column label="性别" width="50" align="center">
              <template slot-scope="scope">
                {{ scope.row.sex }}
              </template>
            </el-table-column>
            <el-table-column label="出生年月" width="120" align="center">
              <template slot-scope="scope">
                {{ scope.row.birthday + ' ' }} {{ scope.row.birthdayType | birthdayTypeFilter }} 
              </template>
            </el-table-column>
            <el-table-column label="年龄" width="50" align="center">
              <template slot-scope="scope">
                {{ scope.row.age }}
              </template>
            </el-table-column>
            <el-table-column label="入籍时长" width="120" align="center">
              <template slot-scope="scope">
                {{ scope.row.joinDuration }}
              </template>
            </el-table-column>
            <el-table-column label="就诊状态" width="100" align="center">
              <template slot-scope="scope">
                {{ scope.row.visitStatus }}
              </template>
            </el-table-column>
            <el-table-column label="会员等级" width="80" align="center">
              <template slot-scope="scope">
                {{ scope.row.vipLevel?scope.row.vipLevel:'V0' }}
              </template>
            </el-table-column>
            <el-table-column label="就诊日期" width="130" align="center">
              <template slot-scope="scope">
                {{ scope.row.visitDate }}
              </template>
            </el-table-column>
            <el-table-column class-name="status-col" :label="'信息查询\n信息修改\n等级设置'" align="center" width="100" >
              <template slot-scope="scope">
                <el-button type="primary" @click="optionPatient(scope.row)">挂号操作</el-button>
                <!-- <el-dropdown size="medium" trigger="click" @command="optionPatient" >
                  <el-button type="primary">
                    操作<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="composeValue(scope.row, 1)" >基础信息查询</el-dropdown-item>
                    <el-dropdown-item :command="composeValue(scope.row, 2)" >基础信息修改</el-dropdown-item>
                    <el-dropdown-item :command="composeValue(scope.row, 3)" >会员等级设置</el-dropdown-item>
                    <el-dropdown-item :command="composeValue(scope.row, 4)" divided >会员就诊记录查询</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown> -->
                <!-- <el-button type="warning"  @click="toGuidance(scope.row)" size="small">挂号</el-button>
                <el-button type="primary"  @click="getInfo(scope.row)" size="small">详情</el-button>
                <el-button type="success"  @click="update(scope.row)" size="small">修改</el-button>
                <el-button type="danger" @click="deleteInfo(scope)" size="small">删除</el-button> -->
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            layout="->, total, prev, pager, next"
            :total="total"
            :current-page="currentPage"
            :page-size="pageSize"
            @current-change="clickCurPage"
            >
          </el-pagination>
        </div>


        <!-- patient detail -->
        <div v-else>
          <el-container>
            <el-main>
              <el-row :gutter=10>
                  <el-col :span=24><span style="font-size: 16px;">就诊状态: 今日无就诊</span></el-col>
              </el-row>
              <el-collapse >
                <el-collapse-item name="1">
                  <template slot="title">
                    <el-row :gutter=10>
                      <el-col :span=24>
                        <span class="main-head-title">基础信息: </span>
                        <span class="main-head-title">
                          {{item.content.code + ' '}}
                          {{item.content.name + ' '}}
                          {{item.content.sex + ' '}}
                          {{item.content.age + '周岁 /'}}
                          {{'手机尾号:'+ item.content.phone + ' /'}}
                          {{'身份证号:'+ item.content.idCard + ' /'}}
                          {{'出生日期:'+ item.content.birthday + ' '}}{{item.content.birthdayType | birthdayTypeFilter}}{{' /'}}
                          {{'会员等级:'}}{{item.content.vipLevel?item.content.vipLevel:'V0' }}
                        </span>
                      </el-col>
                    </el-row>
                  </template>
                    <el-row :gutter=10>
                      <el-col :span=24>
                        <span class="main-head-title">就诊信息: </span>
                        <span class="main-head-title">
                          就诊信息内容
                        </span>
                        </el-col>
                    </el-row>
                    <el-row :gutter=10>
                      <el-col :span=24>
                        <span class="main-head-title">卡券信息: </span>
                        <span class="main-head-title">卡券信息内容 </span>
                      </el-col>
                    </el-row>
                    <el-row :gutter=10>
                      <el-col :span=24>
                        <span class="main-head-title">用药信息: </span>
                        <span class="main-head-title">用药信息内容 </span>
                      </el-col>
                    </el-row>
                    <el-row :gutter=10>
                      <el-col :span=24>
                        <span class="main-head-title">预案信息: </span>
                        <span class="main-head-title">预案信息内容</span>
                      </el-col>
                    </el-row>
                    <el-row :gutter=10>
                      <el-col :span=24>
                        <span class="main-head-title">诊断信息: </span>
                        <span class="main-head-title">诊断信息内容</span>
                      </el-col>
                    </el-row>
                    <el-row :gutter=10>
                      <el-col :span=24>
                        <span class="main-head-title">就诊习惯: </span>
                        <span class="main-head-title">就诊习惯内容</span>
                      </el-col>
                    </el-row>
                </el-collapse-item>
              </el-collapse>

              <el-tabs v-if="item.content.patientTabs && item.content.patientTabs.length != 0" v-model="item.content.patientTabsValue" type="border-card" closable @tab-remove="(targetName) => removePatientTab(targetName, item.content)">
                <el-tab-pane
                  v-for="patientTab in item.content.patientTabs"
                  :key="patientTab.name"
                  :label="patientTab.title"
                  :name="patientTab.name"
                >
                <div v-if="item.content.patientTabsValue == '会员管理'">
                  <el-form :model="item.content" label-width="120px" :rules="addPatientFormRules">
                    <el-row :gutter="10">
                      <!-- <el-col :span=8 >
                        <el-form-item label="编号">
                          <el-input v-model="addPatientForm.code" />
                        </el-form-item>
                      </el-col> -->
                      <el-col :span=8 >
                        <el-form-item label="姓名" prop="name">
                          <el-input v-model="item.content.name" :disabled="true" />
                        </el-form-item>
                      </el-col>
                      <el-col :span=6 >
                        <el-form-item label="性别" prop="sex">
                          <el-select v-model="item.content.sex" placeholder="请选择" :disabled="true" >
                            <el-option
                              v-for="item in sexEnum"
                              :key="item"
                              :label="item"
                              :value="item">
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row :gutter="10">
                      <el-col :span=6 >
                        <el-form-item label="手机号1" prop="phone">
                          <el-input v-model="item.content.phone" @input="inputPhone" maxlength="11" :disabled="true" />
                        </el-form-item>
                      </el-col>
                      <el-col :span=6 >
                        <el-form-item label="手机号2" >
                          <el-input v-model="item.content.phoneTwo" @input="inputPhone" maxlength="11" :disabled="true" />
                        </el-form-item>
                      </el-col>
                      <el-col :span=6 >
                        <el-form-item label="手机号3" >
                          <el-input v-model="item.content.phoneThree" @input="inputPhone" maxlength="11" :disabled="true" />
                        </el-form-item>
                      </el-col>
                      <el-col :span=6 >
                        <el-form-item label="身份证号" prop="idCard">
                          <el-input style="width: 100%" v-model="item.content.idCard" @input="inputIdCard" maxlength="18" :disabled="true" />
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row :gutter="10">
                      <el-col :span=4 >
                        <el-form-item label="出生日期" prop="birthday">
                          <el-date-picker v-model="item.content.birthday" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" @change="changeBirthday" :disabled="true" ></el-date-picker>
                        </el-form-item>
                      </el-col>
                      <el-col :span=6 :offset=4>
                        <el-form-item label="农历/公历" prop="birthdayType">
                          <el-select v-model="item.content.birthdayType" placeholder="请选择" :disabled="true" >
                            <el-option
                              v-for="item in birthdayTypeEnum"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id">
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span=6 >
                        <el-form-item label="年龄">
                          <el-input v-model="item.content.age" type="Number" min=0  :disabled="true" />
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row :gutter="10">
                      <el-col :span=8 >
                        <el-form-item label="来源" prop="source">
                          <el-select v-model="item.content.source" placeholder="请选择" :disabled="true" >
                            <el-option
                              v-for="item in sourceEnum"
                              :key="item.id"
                              :label="item.source"
                              :value="item.id"
                              >
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span=8 >
                        <el-form-item label="介绍人" v-if="item.content.source == 1 || item.content.source == 2" >
                          <el-select v-if="item.content.source == 1" v-model="item.content.introducer" placeholder="请选择" :disabled="true">
                            <el-option
                              v-for="item in patientEnum"
                              :key="item.id"
                              :label="item.code + ' - ' +item.name"
                              :value="item.id">
                            </el-option>
                          </el-select>
                          <el-select v-else-if="item.content.source == 2" v-model="item.content.introducer" placeholder="请选择" :disabled="true">
                            <el-option
                              v-for="item in userEnum"
                              :key="item.id"
                              :label="item.jobNumber + ' - ' + item.name"
                              :value="item.id">
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <div style="width:100%;border: 2px solid #E4E7ED;padding: 10px;">
                      <div v-for="(address, index) in item.content.addressList" :key="index" >
                        <el-row :gutter="10" v-if="index != 0">
                          <el-col :span=6>
                            <el-form-item label="多址说明" prop="multiAddressDes">
                              <el-select v-model="address.multiAddressDes" placeholder="请选择" :disabled="true" >
                                <el-option
                                  v-for="item in multiAddressDesEnum"
                                  :key="item"
                                  :label="item"
                                  :value="item"
                                >
                                </el-option>
                              </el-select>
                            </el-form-item>
                          </el-col>
                          <el-col :span=6>
                            <el-form-item label="说明填写" v-if="address.isOtherAddress == 1" prop="multiAddressDesOther">
                              <el-input v-model="address.multiAddressDesOther" :disabled="true"/>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row :gutter="10">
                          <el-col :span=8 >
                            <el-form-item label="省/市/区" prop="addressPre" >
                              <el-cascader
                                :disabled="true"
                                size="large"
                                :options="options"
                                v-model="address.addressPre"
                                :props="{ value: 'label', label: 'label'}"
                                >
                              </el-cascader>
                            </el-form-item>
                          </el-col>
                          <el-col :span=6>
                            <el-form-item label="小区" prop="addressMid">
                              <el-input v-model="address.addressMid" :disabled="true" ></el-input>
                            </el-form-item>
                          </el-col>
                          <el-col :span=10 >
                            <el-form-item label="详细地址" prop="addressInfo">
                              <el-input v-model="address.addressInfo" :disabled="true" ></el-input>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row :gutter="10">
                          <el-col :span=8 >
                            <el-form-item label="距离" prop="retailStore">
                              <el-select v-model="address.retailStore" placeholder="门店请选择" :disabled="true" >
                                <el-option
                                  v-for="item in deptEnum"
                                  :key="item"
                                  :label="item"
                                  :value="item"
                                >
                                </el-option>
                              </el-select>
                            </el-form-item>
                          </el-col>
                          <el-col :span=8 >
                            <el-form-item label="公交站数" prop="distance">
                              <el-input v-model="address.distance" type="Number" min=0 :disabled="true" />
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-divider></el-divider>
                      </div>
                    </div>
                  </el-form>
                </div>

                <div v-if="item.content.patientTabsValue == '会员就诊记录查询'">
                  会员就诊记录查询内容
                </div>
                
                <div v-if="item.content.patientTabsValue == '诊中处置'">
                  <el-container>
                    <el-aside width="70%">
                      <div style="width: 100%;text-align: left;">
                        <span class="main-head-title">诊中·诊室检查开立 / </span>
                        <span class="main-head-title">诊中·实验室检查开立 / </span>
                        <span class="main-head-title">诊中·信息采集 / </span>
                        <br>
                        <span class="main-head-title">诊中·诊断开具 / </span>
                        <span class="main-head-title">诊中·处方开具 / </span>
                        <span class="main-head-title">诊中·预案填写</span>
                      </div>
                    </el-aside>
                    <el-main>
                      <div style="width: 100%;height: 100%;text-align: left;padding: 5px;">
                        <el-button type="primary">停止服务</el-button>
                      </div>
                    </el-main>
                  </el-container>

                </div>

                </el-tab-pane>
              </el-tabs>

            </el-main>
            <el-aside>
              <el-menu
                @select="(key, keyPath) => handleMenuSelect(key, keyPath, item.content)" 
                default-active="2"
                :default-openeds="defaultOpen"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose">
                <el-submenu index="会员管理" >
                  <template slot="title">
                    <span style="font-weight: 600;font-size: 25px;">会员管理</span>
                  </template>
                    <el-menu-item index="会员基础信息查询" style="font-size: 18px">会员基础信息查询</el-menu-item>
                </el-submenu>
                <el-submenu index="诊中处置" >
                  <template slot="title">
                    <span style="font-weight: 600;font-size: 25px;">诊中处置</span>
                  </template>
                    <el-menu-item index="诊中·诊室检查开立" style="font-size: 18px">诊中·诊室检查开立</el-menu-item>
                    <el-menu-item index="诊中·实验室检查开立" style="font-size: 18px">诊中·实验室检查开立</el-menu-item>
                    <el-menu-item index="诊中·信息采集" style="font-size: 18px">诊中·信息采集</el-menu-item>
                    <el-menu-item index="诊中·诊断开具" style="font-size: 18px">诊中·诊断开具</el-menu-item>
                    <el-menu-item index="诊中·处方开具" style="font-size: 18px">诊中·处方开具</el-menu-item>
                    <el-menu-item index="诊中·预案填写" style="font-size: 18px">诊中·预案填写</el-menu-item>
                </el-submenu>
                <el-submenu index="会员就诊记录查询" >
                  <template slot="title">
                    <span style="font-weight: 600;font-size: 25px;">会员就诊记录查询</span>
                  </template>
                    <el-menu-item index="会员就诊记录查询" style="font-size: 18px">会员就诊记录查询</el-menu-item>
                </el-submenu>
                <el-submenu index="缴费/卡/券" >
                  <template slot="title">
                    <span style="font-weight: 600;font-size: 25px;">缴费/卡/券</span>
                  </template>
                    <el-menu-item index="会员缴费/卡/券记录查询" style="font-size: 18px">会员缴费/卡/券记录查询</el-menu-item>
                </el-submenu>
                <el-submenu index="租借药盒" >
                  <template slot="title">
                    <span style="font-weight: 600;font-size: 25px;">租借药盒</span>
                  </template>
                    <el-menu-item index="会员租借药盒记录查询" style="font-size: 18px">会员租借药盒记录查询</el-menu-item>
                </el-submenu>
              </el-menu>
            </el-aside>
          </el-container>
        </div>

      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

import { getList as getPatientList, add, edit, del, getAllPatientList} from '@/api/patient'
import { regionData } from 'element-china-area-data'
import { getAllUserList} from '@/api/user'
import { getList as getSourceList} from '@/api/source'
import { getList, addOrUpdate, guidanceWaitingNumber} from '@/api/guidance'

export default {
  name: "GuidancePage",
  filters: {
    birthdayTypeFilter(status) {
      const statusMap = ['', '阳', '阴']
      return statusMap[status]
    },
    statusFilter(status) {
      const statusMap = ['候诊', '就诊中', '已完成', '中止']
      return statusMap[status]
    }
  },
  data() {
    const validateName = (rule, value, callback) => {
      if (!value) callback(new Error('请输入姓名')) 
      else callback()
    }
    return {
      list: [],
      listLoading: true,
      patientList: null,
      patientListLoading: true,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      curIndex: -1,
      infoVisible: false,
      addPatientformVisible: false,
      info: {},
      addPatientForm: {},
      query: {},
      dialogTitle: '添加来源',
      depts:[],
      editableTabsValue: '诊中列表',
      editableTabs: [],
      patientTabsValue: '',
      patientTabs: [],
      sourceEnum: [],
      sexEnum: ["男", "女"],
      userEnum: [],
      patientEnum: [],
      options: regionData,
      birthdayTypeEnum:[{id: 1, name: '公历'}, {id: 2, name: '农历'}],
      multiAddressDesEnum: ["临时居住", "子女居所", "邮寄用地址", "其他"],
      deptEnum: ['劳动店', '永春店'],
      introducerDisable: true,
      defaultOpen: ['会员管理', '诊中处置', '会员就诊记录查询', '缴费/卡/券', '租借药盒'],
      
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      var loginInfo = this.$store.getters.userInfo.loginInfo
      var deptId = loginInfo.loginDept.deptId
      // var workAddressId = loginInfo.loginWorkAddress.id
      var jobOfficeId = loginInfo.loginJobOffice?loginInfo.loginJobOffice.jobOfficeId:undefined
      console.log("loginInfo", loginInfo)
      getList({currentPage: this.currentPage, pageSize: this.pageSize, deptId: deptId, jobOfficeId: jobOfficeId}).then(res=>{
        console.log(res.data)
        this.list = res.data.records
        this.listLoading = false
      }).catch(err=>{
        console.log("err")
        console.log(err)
        this.listLoading = false
      })
      guidanceWaitingNumber({deptId: deptId, workAddressId: undefined, jobOfficeId: jobOfficeId}).then(res=> {
        this.reports = res.data
      })

      getSourceList().then(sourceRes=>{
        this.sourceEnum = sourceRes.data
      })
      getAllPatientList().then(res=>{
        console.log("patient res:", res)
        this.patientEnum = res.data
      })
      getAllUserList().then(res=>{
        console.log("user res:", res)
        this.userEnum = res.data
      })
    },
    clickCurPage(val){
      this.currentPage = val
      this.fetchData()
    },
    getInfo(row) {
      this.info = row
      this.infoVisible = true
    },
    update(row) {
      this.reset()
      this.dialogTitle = '修改来源'
      this.form = JSON.parse(JSON.stringify(row))
      this.formVisible = true
    },
    
    cancel() {
      this.formVisible = false
    },
    reset(){
      this.form = {}
    },
    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }
      
      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter(tab => tab.name !== targetName);
    },
    removePatientTab(targetName, patient) {
      let tabs = patient.patientTabs;
      let activeName = patient.patientTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }
      patient.patientTabsValue = activeName;
      patient.patientTabs = tabs.filter(tab => tab.name !== targetName);
    },
    queryPatient() {
      var list = this.editableTabs.filter(item => item.name == '会员查询')
      if(list.length != 0) {
        this.editableTabsValue = '会员查询'
        return
      }
      this.getPatientList({})
      this.editableTabs.push({
        title: '会员查询',
        name: '会员查询',
        content: {},
      })
      this.editableTabsValue = '会员查询'
    },
    search() {
      this.getPatientList({name: this.query.name})
    },    
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //  get patient list page function
    getPatientList(params) {
      this.patientListLoading = true
      params.currentPage = this.currentPage
      params.pageSize = this.pageSize 
      getPatientList(params).then(res=>{
        this.patientList = res.data.records
        console.log(this.patientList)
        this.patientList.forEach(item=>{
          item.age = new Date().getFullYear() - item.birthday.substring(0,4)
          item.addressList.forEach(address=>{
            var addressPreArr = address.address.split(' ')
            address.addressPre = [addressPreArr[0], addressPreArr[1], addressPreArr[2]]
            this.$set(address, 'addressMid', addressPreArr[3])
            this.$set(address, 'addressInfo', addressPreArr[4])
          })
        })
        this.patientListLoading = false
      }).catch(err=>{
        console.log("err")
        console.log(err)
        this.patientListLoading = false
      })
      
    },
   
    handleChange (address) {
      this.$set(this.addPatientForm, 'addressPre', address)
    },
    addAddress() {
      this.addPatientForm.addressList.push({})
    },
    deleteAddress(address, list) {
      list.splice(list.indexOf(address), 1);
    },
    updateFormAddAddress(updateForm) {
      updateForm.addressList.push({})
    },
    changeBirthday() {

    },
    changeMultiAddressDes(item, address) {
      if(item == '其他')  {
        this.$set(address, 'isOtherAddress', 1)
      } else {
        this.$set(address, 'isOtherAddress', 0)
      }
    },
    confirm() {
      this.$refs.addPatientForm[0].validate(valid => {
        if (valid) {
          console.log(this.addPatientForm)
          this.addPatientForm.addressList.forEach(address=>{
            address.address = address.addressPre[0] + ' ' + address.addressPre[1] + ' ' + address.addressPre[2] + ' ' + address.addressMid + ' ' + address.addressInfo
          })
          add(this.addPatientForm).then(res=>{
            console.log(res)
            this.$message({
              message: '添加成功',
              type: 'success'
            })
            this.editableTabsValue = "1"
          }).catch(err=>{
            console.log(err)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    updateConfirm(updateForm) {
      // this.$refs.updatePatientForm[0].validate(valid => {
      //   if (valid) {
          console.log(updateForm)
          updateForm.addressList.forEach(address=>{
            address.address = address.addressPre[0] + ' ' + address.addressPre[1] + ' ' + address.addressPre[2] + ' ' + address.addressMid + ' ' + address.addressInfo
          })
          edit(updateForm).then(res=>{
            console.log(res)
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.editableTabsValue = "1"
          }).catch(err=>{
            console.log(err)
          })
        // } else {
        //   console.log('error submit!!')
        //   return false
        // }
      // })
    },
    optionPatient(patient) {
      var list = this.editableTabs.filter(item => item.name == patient.code)
      this.initPatientVisitData(patient, list)
    },

    initPatientVisitData(patient, list) {
      if(list.length != 0) {
        this.editableTabsValue = patient.code
        return
      }
      this.$set(patient, 'patientTabsValue', '挂号')
      this.$set(patient, 'patientTabs', [{
        title: '挂号',
        name: '挂号',
        content: {}
      }])
      this.$set(patient, 'visitActiveName', '')
      this.editableTabs.push({
        title: patient.name,
        name: patient.code,
        content: patient
      })
      this.editableTabsValue = patient.code
    },

    /** patient detail page function */
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleMenuSelect(key, keyPath, patient) {
      console.log(patient)
      var tabValue = keyPath[0]
      console.log(tabValue)
      this.$set(patient, 'visitActiveName', keyPath[1])
      var list = patient.patientTabs.filter(item => item.name == tabValue)
      if(list.length != 0) {
        patient.patientTabsValue = tabValue
        return
      }

      patient.patientTabs.push({
        title: tabValue,
        name: tabValue,
        content: {}
      })
      patient.patientTabsValue = tabValue
    },

    
  }
}
</script>


<style>
  .el-aside {
    width: 20%;
    text-align: center;
  }
  
  .el-main {
    width: 80%;
    text-align: left;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  .main-head-title {
    font-size: 14px;
  }
  .el-table .cell {
    white-space: pre-line;
  }
  
</style>